<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/css/detail.css">
    <link rel="stylesheet" href="/libs/iconfont/iconfont.css">
</head>

<body>
    <!-- 头部 -->
    <header></header>
    <!-- 面包屑导航 -->
    <nav>
        <ul class="article_contain">
            <li><a href="/">首页</a></li>
            <li><a href="/html/list.html">香水</a></li>
            <li><a>兰蔻殿堂香水家族</a></li>
        </ul>
    </nav>
    <!-- 购买内容 -->
    <section id="detailList">

    </section>
    <script type="text/html" id="detailListTemplate">
    <div class="sec_left">
        <ul class="small_img" id="smallImg" >
            {{each img src}}
            <li id="checking">
                <a href="#" data-image="{{src}}" data-zoom-image="{{src}}" >
                <img src="{{src}}" alt="">
            </a>
            </li>
            {{/each}}
        </ul>
    </div>
    <div class="sec_img">
        <img src="{{img[0]}}" class="zoom_image" data-image="{{img[0]}}" data-zoom-image="{{img[0]}}" >
    </div>
    <div class="sec_right">
        <div class="product_top">
            <div class="product_tit">
                <h2 class="pro_tit_1">{{name}}</h2>
                <h1 class="pro_tit_2">{{title}}</h1>
            </div>
            <!--评价打分-->
            <div class="product_evaluate_grade">
                <i class="iconfont icon-ordinarywuxing"></i><i class="iconfont icon-ordinarywuxing"></i><i
                    class="iconfont icon-ordinarywuxing"></i><i class="iconfont icon-ordinarywuxing"></i><i
                    class="iconfont icon-ordinarywuxing"></i>
                <a class="evaluate-txt">{{critic}}条评论</a>
            </div>
        </div>
        <div class="right_wrapper_container">
            <ul class="panal">
                <!-- 第二个数代表从后台拿过来的数据，第三个数代表每一项 -->
                {{each desc item}}
                <li class="panal_box" class="checking">
                    <p class="capacity-num">{{item}}</p>
                    <p class="capacity">{{capacity[0]}}ml</p>
                 </li>
                 {{/each}}
            </ul>
            <!-- {{each capacity item}}{{/each}} -->
    <!-- 选择数量，购买按钮 -->
    <div class="purchase">
        <div class="price_num">
            <!-- <span>￥269</span> -->
            <span>￥{{price}}</span>
            <a href="javascript:;" class="trig">
                   <span class="dropdown-txt">1</span>
                   <i class="iconfont icon-platformentrance dropdown-icon"></i>      
                   <ul class="pull-down">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>         
            </a>
        </div>
        <a href="javascript:;" class="shop_bag" id="addToShopBag" >加入购物袋</a>
        <a href="#" class="imm_buy">立即购买</a>

    </div>

    <!-- 产品介绍 -->
    <div class="product-intro-box">
        <p class="product-prop-txt">产品简介</p>
        <p></p>
        <div style="color:red">因数量有限，同一个收货地址或者同一手机号码限购5件，敬请谅解。</div>
        <br>
        兰蔻殿堂香水家族，融合单一花卉不同香调，打造六款至臻香水。
        <p></p>
        <a class="show-more">查看更多</a>
    </div>

    <!-- 加入收藏 -->
    <div class="product-collection">
        <a><i class="iconfont icon-heart"></i><span>添加到我的收藏夹</span></a>
    </div>
    <!-- 额外 -->
    <div class="product-ser-box">
        <ul>
            <li><img src="https://res.lancome.com.cn/build/images/static/pdp/activity-surprise.jpg" style="opacity: 1;">
                <p>活动惊喜</p>
            </li>
            <li><img src="https://res.lancome.com.cn/build/images/static/pdp/free-of-charge.jpg" style="opacity: 1;">
                <p>全场免运费</p>
            </li>
            <li><img src="https://res.lancome.com.cn/build/images/static/pdp/quality-assurance.jpg" style="opacity: 1;">
                <p>正品保证</p>
            </li>
        </ul>
    </div>
    </div>
    </div>
    </script>
    <div class="shopbag">
        <span>{{shop.num}}</span>
    </div>
    <!-- 底部 -->
    <footer></footer>
    <script src="/libs/require/require.min.js" data-main="/js/detail"></script>

</body>

</html>